function dynamicList() {
    //声明一个变量mockData用来存储一组数据
    let mockData = [{
                text: '全部',
                tip: '身份证实名'
            },
            {
                text: '生活服务',
                tip: '银行卡'
            },
            {
                text: '金融科技',
                tip: '短信'

            },
            {
                text: '交通地理',
                tip: '天气'
            },
            {
                text: '充值缴费',
                tip: '短信'
            },
            {
                text: '数据智能',
                tip: '手机归属地'
            },
            {
                text: '企业工商',
                tip: 'IP'
            },
            {
                text: '应用开发',
                tip: '手机归属地'
            },
            {
                text: '电子商务',
                tip: 'IP'
            },
            {
                text: '吃喝玩乐',
                tip: '视频'
            },
            {
                text: '文娱视频',
                tip: '视频'
            },
            {
                text: '免费接口大全',
                tip: '短信'
            },
            {
                text: '短信',
                tip: '身份证实名'
            },
            {
                text: '汽车',
                tip: '银行卡'
            },
            {
                text: '核验',
                tip: '银行卡'
            },
            {
                text: '最新发布',
                tip: '银行卡'
            },
            {
                text: 'API私有化部署',
                tip: '身份证实名'
            }
        ]
        //获取父元素ul
    let ul = document.querySelector('.api-list ul');
    //声明一个空字符串
    let strHtml = '';
    //遍历出数组的每一项
    for (let i = 0; i < mockData.length; i++) {
        strHtml += `<li class="list-item" tip = "${mockData[i].tip}">${mockData[i].text}</li>`
    }
    //将strHtml拼接的内容传入到ul中
    ul.innerHTML = strHtml;

    // 搜索提示

    //事件委派
    //获取span和input
    let span = document.querySelector('.api-list-search span');
    let input = document.querySelector('.api-list-search input');
    //点击父元素,找到子元素
    ul.addEventListener('click', function(e) {
        console.log(e.target); //找到真实事件源
        if (e.target.nodeName === 'LI') {
            let tip = e.target.getAttribute('tip'); //获取tip这个属性
            // input.setAttribute('placeholder', tip);//将tip属性的内容传入给input的placeholder
            input.placeholder = tip;
            span.textContent = e.target.textContent;
        }
    })
}
dynamicList()

// API展示部分  
let pagesArr = [
    //第一页
    [
        { src: './images/API_01.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_02.jpg', name: '身份证实名认证', price: '0', special: false },
        { src: './images/API_03.jpg', name: '天气预报', price: '0', special: false },
        { src: './images/API_04.jpg', name: '银行卡四元素校验', price: '0', special: false },
        { src: './images/API_05.jpg', name: '短信API服务', price: '0', special: false },
        { src: './images/API_01.jpg', name: 'LOL皮肤价格查询', price: '0', special: false },
        { src: './images/API_02.jpg', name: '2021出行防疫政策指南', price: '0.10000', special: false },
        { src: './images/API_03.jpg', name: '天气', price: '0.10000', special: false },
        { src: './images/API_04.jpg', name: '公共交通', price: '0.10000', special: true },
        { src: './images/API_05.jpg', name: '2021出行防疫政策指南', price: '0.10000', special: true },
    ],
    //第二页
    [
        { src: './images/API_01.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_02.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_01.jpg', name: '嘀嘀嘀', price: '0', special: false },
        { src: './images/API_03.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_01.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_04.jpg', name: 'LOL皮肤价格查询', price: '0', special: false },
        { src: './images/API_01.jpg', name: '2021出行防疫政策指南', price: '0.10000', special: false },
        { src: './images/API_05.jpg', name: '天气', price: '0.10000', special: false },
        { src: './images/API_02.jpg', name: '问星座运势查询', price: '0.10000', special: true },
        { src: './images/API_01.jpg', name: '公共交通', price: '0.10000', special: true },
    ],
    //第三页
    [
        { src: './images/API_01.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_01.jpg', name: '巴拉巴拉', price: '0', special: false },
        { src: './images/API_02.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_03.jpg', name: '法外狂徒咨询费', price: '0', special: false },
        { src: './images/API_01.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_04.jpg', name: 'LOL皮肤价格查询', price: '0', special: false },
        { src: './images/API_01.jpg', name: '刑法守则', price: '0.10000', special: false },
        { src: './images/API_05.jpg', name: '天气', price: '0.10000', special: false },
        { src: './images/API_01.jpg', name: '公共交通', price: '0.10000', special: true },
        { src: './images/API_02.jpg', name: '问星座运势查询', price: '0.10000', special: true },
    ],
    //第四页
    [
        { src: './images/API_01.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_01.jpg', name: '巴拉巴拉', price: '0', special: false },
        { src: './images/API_02.jpg', name: '2021出行防疫政策指南', price: '0', special: false },
        { src: './images/API_03.jpg', name: '啊哈哈哈', price: '0', special: false },
        { src: './images/API_01.jpg', name: '外币八部', price: '0', special: false },
        { src: './images/API_04.jpg', name: 'LOL皮肤价格查询', price: '0', special: false },
        { src: './images/API_01.jpg', name: '2021出行防疫政策指南', price: '0.10000', special: false },
        { src: './images/API_05.jpg', name: '天气', price: '0.10000', special: false },
        { src: './images/API_01.jpg', name: '公共交通', price: '0.10000', special: true },
        { src: './images/API_02.jpg', name: '问星座运势查询', price: '0.10000', special: true },
    ],
]

function dynamicShow(data) {
    let ul = document.querySelector('.api-img-list');
    let str = '';
    for (let i = 0; i < data.length; i++) {
        str += `
    <li class="api-item">
    <div class="top">
    <img src="${data[i].src}" alt="">
    <p class="desc">${data[i].name}</p>
    <span class="price ${data[i].price == 0 ? 'green' : 'red'}">${data[i].price== 0 ? '免费': '￥'+data[i].price +'/次'}</span>
    </div>
    <button>申请数据</button>
    `
        if (data[i].special) {
            str += `
        <div class="special">
            企业专用
          </div>
          </li>
        `
        } else {
            str += `</li>`
        }
    }
    ul.innerHTML = str
}
let index = 0; //从第0组数据开始,也就第一页
dynamicShow(pagesArr[0]);


//01- 获取所有的页面这个圆点page
function getCircle() {
    let pages = document.querySelectorAll('.page')
        //02- 注册点击事件
    pages.forEach(function(span, i) {
        span.addEventListener('click', function() {
            //03- 事件中，给当前的page，增加active， 把原来page的active去掉
            //把原来page的active去掉
            pages[index].classList.remove('active')
                //给当前的page，
            console.log(this.classList)
            this.classList.add('active')
                //同步索引⭐
            index = i;
            // 换一组数据渲染🌹
            dynamicShow(pagesArr[index])
        })

    })
}
getCircle()

// api模态框
let btns = document.querySelectorAll('.api-item button');
generateLogin(mask)
btns.forEach(function(btn, i) {
    btn.addEventListener('click', function() {
        mask.style.display = 'block'
    })
})